import Vue from 'vue'
import App from './App.vue'


//版本问题扩展
//使用Vue2  只能使用Vue Router3.x  Vuex3.x
//使用Vue3  只能使用Vue Router4.x  Vuex4.x

//Vue Router路由的初步使用 (基础五步+扩展两步)
//五个基础步骤(固定) 
//1. 下载 ：下载VueRouter模块到当前工程，版本3.6.5
//npm install vue-router@3.6.5
//2.引入
//import VueRouter from 'vue-router'
//3.安装注册
//Vue.use(VueRouter)
//4.创建路由对象
//const router = new VueRouter()
//5.注入，将路由对象注入到newVue实例中，建立关联
/* new Vue({
  render: h => h(App),
  router // 简写 -- 完整写法是 router: router
}).$mount('#app') */

//2个核心步骤
//1。建组件（views目录），配规则
//2。准备导航链接，配置路由出口（匹配的组件展示的位置）
import Find from './views/Find.vue'
import Friend from './views/Friend.vue'
import MyMusic from './views/MyMusic.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //Vue Router插件初始化

const router = new VueRouter({
  //routes 路由规则【们】
  //route 一条路由规则 {path: 路由路径, component: 路由组件}
  routes: [
    { path: '/find', component: Find },
    { path: '/friend', component: Friend },
    { path: '/myMusic', component: MyMusic }
  ]
})//创建路由对象

Vue.config.productionTip = false
//注入
new Vue({
  render: h => h(App),
  router: router
}).$mount('#app') 
